<!-- 模板 -->
<template>
  <div class="classified">
      <div class="box">
          <div class="btn">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button>
          </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="分类名称" align="center"> </el-table-column>
            <el-table-column prop="sort" label="排序" align="center"> </el-table-column>
            <el-table-column prop="createTime" label="日期" align="center"> </el-table-column>
            <!-- <el-table-column prop="icon" label="图标" align="center"> 
              <template slot-scope="scope">
                <img style="height: 80px" :src=" scope.row.icon" />
              </template>
            </el-table-column> -->
            <el-table-column  label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修改</el-button>
                    <el-button @click="handleUnOrUp(scope.row, 1)" type="primary" plain v-if="scope.row.state == 0"> 上 架 </el-button>
                    <el-button @click="handleUnOrUp(scope.row, 0)" type="primary" plain v-if="scope.row.state == 1" > 下 架 </el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-card>
        <pagination
        v-show="newsTotal >0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getClassList"
        />
      </div>
<!-- 添加弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" :rules="rules" ref="form">
  <el-form-item label="分类名称" prop="name">
    <el-input v-model="formLabelAlign.name"></el-input>
  </el-form-item>
  <!-- <el-form-item label="上传图标:" prop="icon">
    <el-upload
      :headers='headers'
      class="avatar-uploader"
      :action="upImage+'/table/upload'"
      :on-success="handleAvatarSuccess"
      :show-file-list="false"
    >
      <img v-if="formLabelAlign.icon" :src="formLabelAlign.icon" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item> -->
  <el-form-item label="排序" prop="sort" >
    <el-input v-model.number="formLabelAlign.sort" ></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" v-if="!show">确 定</el-button>
    <el-button type="primary" @click="update" v-else>修 改</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getClassifiedList,getAdd,getUpdate,getDet,editUnOrUp } from "@/api/classified/classified";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        labelPosition: 'right',
        tableData: [],
        title:'',
        dialogVisible:false,
        formLabelAlign: {
          name: '',
          sort: '',
          // picUrl: "",
          icon:'',
        },
        show:false,
        params: {
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal:0,
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        rules:{
        //   icon: [
        //   { required: true, message: "图标不能为空", trigger: "blur" }
        // ],
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur' },
            { type: 'number', message: '必须为数字值',trigger: 'blur'}
          ],
        },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
      handleAvatarSuccess(res, file) {
      this.formLabelAlign.icon ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
      // console.log(this.formLabelAlign.icon);
        if(res.code ==200){
          // this.form.coverPic = res.message
         this.$message.success("上传成功");
        }
    },
    //   删除
    handleDeleteClick(row){
        this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id:row.id
          }
          getDet(data).then(res => {
          if (res.code == 200) {
            this.getClassList()
          }
        });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     handleUnOrUp(row,value){
      this.$confirm(`是否继续${value == 0 ? '下架' : '上架'}操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return editUnOrUp({
            id: row.id,
            state: value,
          });
        })
        .then(() => {
          this.getClassList();
          this.$message.success(value == 0? '下架成功' : '上架成功')
        })
        .catch(function() {});
    },
    //   修改操作
    update(){
      this.$refs["form"].validate((valid) => {
          if (valid) {
             getUpdate(this.formLabelAlign).then(res => {
                if(res.code == 200){
                    // console.log(res);
                    this.dialogVisible = false
                    this.$message.success('修改成功')
                    this.getClassList()
                }
            })
          }
        });
    },
    handleUpdateClick(row){
        this.show = true
        this.title = '修改'
        this.formLabelAlign = JSON.parse(JSON.stringify(row))
        this.formLabelAlign.sort = Number(this.formLabelAlign.sort) 
        this.dialogVisible = true
      console.log(this.formLabelAlign);
    },
    // 新增操作
    onSubmit(){
       this.$refs["form"].validate(valid => {
          if (valid) {
            getAdd(this.formLabelAlign).then(res => {
                if(res.code == 200){
                    // console.log(res);
                    this.dialogVisible = false
                     this.$message.success('新增成功')
                    this.formLabelAlign = {}
                    this.getClassList()
                }
            });
          }
      });
        // getAdd(this.formLabelAlign).then(res => {
        //         if(res.code == 200){
        //             // console.log(res);
        //             this.dialogVisible = false
        //             this.formLabelAlign = {}
        //             this.getClassList()
        //         }
        //     });
    },
    //   添加按钮
    add(){
        this.title = '添加'
        this.formLabelAlign = {
          icon:'',
        }
        this.dialogVisible = true
        this.show = false
    },
    handleClose(){
      this.dialogVisible = false
    },
    //   获取所有
    getClassList() {
        getClassifiedList(this.params).then(res => {
            if(res.code == 200){
                // console.log(res);
                this.tableData = res.rows
                this.newsTotal = res.total;
            }
        });
    },
  },
  created () {
      this.getClassList()
  },
  mounted () {}
}
</script>

<style  rel="stylesheet/scss" lang="scss">
.classified{
  padding-bottom: 20px;
}
.box{
    margin: 10px;
    .btn{
        margin: 10px;
    }
    
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
